<template>
  <div class="default-table-box">
    <el-container>
      <el-main>
        <el-table :data="fatherData.state.tableData.records" style="width: 100%">
          <el-table-column fixed="left" label="Operations" min-width="100">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">编辑</el-button>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
          
          <el-table-column v-for="(paramItem,index) in fatherData.state.columuParamArr" 
          :key="index" :prop="paramItem.paramName" :label="paramItem.label" 
          :min-width="paramItem.minWidth==null ? null : paramItem.minWidth"
          :width="paramItem.width==null ? null : paramItem.width">
          </el-table-column>

          <!-- <el-table-column prop="menuName" label="菜单名字" min-width="120"></el-table-column> -->
        </el-table>
      </el-main>
      <el-footer>
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="recordsTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
  
<script lang="ts" setup name="DefaultTable">
import { type DefaultTableObj } from '@/bean/table/DefaultTableData';
import { ref,reactive, onBeforeMount } from 'vue'
  
const fatherData = defineProps(['state']);


const emit = defineEmits(["changePageParam"]);

const handleClick = () => {
  console.log('click')
}


import type { ComponentSize } from 'element-plus'
const currentPage = fatherData.state.tableData.pageNum;
const pageSize = fatherData.state.tableData.pageSize;
const size = ref<ComponentSize>('default')
const recordsTotal = ref(fatherData.state.tableData.recordsTotal);
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  let pageParam = {pageNum: currentPage, pageSize: val}
  emit('changePageParam',pageParam);
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
  
<style scoped>

.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  